<template>
  <div>
    <vm-common-header
      :pageTitle="pageTitle"
      :goBack="goBack"></vm-common-header>
    <div class="vm-login-container" ref="login">
      <div class="vm-login-logo">
        <img src="../../../static/images/vm-vocoor-logo.png" alt="">
      </div>
      <div class="vm-user-info">
        <div class="userName">
          <input type="text" v-model="username" placeholder="用户名/手机号">
        </div>
        <div class="passWord">
          <input type="password" v-model="password" placeholder="请输入密码">
          <span class="vm-forget-password">忘记密码</span>
        </div>
      </div>
      <div class="vm-scroll-validate">
        <mt-button type="danger" @click="userLogin">登录</mt-button>
      </div>
      <div class="vm-login-option">
        <span class="identifyingLogin">短信验证码登录</span>
        <span class="register" @click="$router.push({path: '/addSupplyChain'})">新用户注册</span>
      </div>
    </div>
  </div>
</template>

<script>
  import BScroll from 'better-scroll'
  import { userLogin } from '@/api/login.js'
  import vmCommonHeader from '@/components/vm-common-header.vue'
  export default {
    data () {
      return {
        pageTitle: this.$route.meta.pageTitle,
        goBack: this.$route.meta.goBack,
        username: '',
        password: ''
      }
    },
    created () {

    },
    mounted () {
      this.$nextTick(() => {
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.login, {
            click: true,
          });
        } else {
          this.scroll.refresh();
        }
      });
    },
    components: {
      'vm-common-header': vmCommonHeader,
    },
    methods: {
      userLogin () {
        let username = this.username;
        let password = this.password;
        if ( !username ) {
          this.$toast('用户名/手机号不能为空!');
          return;
        }
        if ( !password ) {
          this.$toast('密码不能为空!');
          return;
        }
        userLogin(username, password).then(res => {
          if ( res.data.status == 200 ) {
            let data = res.data.data;
            let role = res.data.data.role;
            let autDataLen = role.length;
            let userObj = new Object();
            userObj.token = data.token;
            userObj.user_id = data.user_id;
            userObj.company_id = data.company_id;
            userObj.username = data.username;
            userObj.sys_type = data.sys_type;
            userObj.login_time = data.login_time;
            userObj.depId = data.depId;
            userObj.type = data.type;
            userObj.name = data.name; // 当前登录名字
            userObj.companyName = data.companyName; // 当前登录公司名称

            //存储用户数据
            var userDataJson = JSON.stringify(userObj);
            localStorage.setItem("userData", userDataJson);

            var authorityAll = JSON.stringify(role);
            localStorage.setItem("authorityAll", authorityAll);

            // //循环权限拆分 存入本地 判断模块
            // for(var i = 0; i < autDataLen; i++) {
            //   console.log(role[i]);
            //   var aut = JSON.stringify(role[i]);
            //   localStorage.setItem(role[i].code, aut);
            // };


            this.$toast('登录成功!');
            setTimeout(() => {
              this.$router.push({
                path: '/index'
              });
            },2000);


          } else {
            this.$toast(res.data.message);
          }

        }).catch(err => {
          this.$toast('网络数据请求繁忙!');
          console.log(err);
        })
      }
    }
  }
</script>

<style scoped lang="scss">
.vm-login-container {
  height: 100%;
  padding: 60px 40px 0 40px;
  .vm-login-logo {
    margin-bottom: 60px;
    img {
      max-width: 255px;
      max-height: 240px;
    }
  }
  .vm-user-info {
    background-color: #fff;
    border: 1px solid #ccc; /* no */
    border-radius: 10px;
    .userName {
      border-bottom: 1px solid #eeeeee;  /* no */
    }
    .userName,
    .passWord {
      display: flex;
      justify-content: space-between;
      position: relative;
      height: 90px;
      padding: 25px 0 25px 20px;
      input {
        line-height: 40px;
        padding: 0;
        margin: 0;
        border: none;
        background: none !important;
        font-size: 28px;
        width: auto;
      }
      .vm-forget-password {
        height: 100%;
        margin-right: 30px;
        font-size: 26px;
        color: #000000;
        font-weight: bold;
      }
    }
  }
  .vm-scroll-validate {
    margin: 40px 0;
    .mint-button {
      font-size: 34px;
      border-radius: 10px;
      width: 100%;
      height: 90px;
    }
  }
  .vm-login-option {
    display: flex;
    justify-content: space-between;
    color: #db271b;
    span {
      font-size: 26px;
    }
  }
}
</style>
